<template>
    <div class="flex_x fx_c fx_ac">
        <div class="flex_x fx_row" style="width:1000px">
            <img class="img_size" src="../../assets/img/bg_wang.jpeg" alt="logo">
            <div class="flex_x fx_c fx_ac" style="margin-left:30px">
                <div class="companyText">兰溪镇</div>
                <div class="companyEnglish">LanxiCity</div>
            </div>
            <div class="flex_x fx_c fx_ac" style="margin-left:50px">
                <div style="font-size:20px">蓝溪分阁服务大厅</div>
                <div class="">百分百有效率</div>
            </div>
            <div class="flex_x fx_row fx_ac fx_sa" style="width:600px;margin-left:30px">
                <a class=" flex_x fx_ac fx_sa lion " :class="{'action':topIndex==1}" href="/#/phs/start">首页</a>
                <a class=" flex_x fx_ac fx_sa lion" :class="{'action':topIndex==2}" href="/#/phs/talk">资讯</a>
                <a class=" flex_x fx_ac fx_sa lion" :class="{'action':topIndex==3}">活动</a>
                <a class=" flex_x fx_ac fx_sa lion" :class="{'action':topIndex==4}">优惠</a>
                <a class=" flex_x fx_ac fx_sa lion" :class="{'action':topIndex==5}">我的</a>
            </div>
            
        </div>
    </div>
</template>
<script>
export default {
    props:['topIndex'],
    data(){
        return{
         
        }
    },
    mounted(){
       
    }
}
</script>
<style scoped>
.s{
    background-color: lightsteelblue;
}
.ss{
    background-color: thistle;
}
.img_size{
    width: 50px;
    height: 50px;
    
}
.companyText{
    font-size: 25px;
    font-weight: bold;
}
.companyEnglish{
    font-size: 10px;
    background-image:linear-gradient(to right, lightskyblue , yellow) ;
    background-clip:text;
    -webkit-background-clip: text;
    color: transparent;
}
.action{
    
    color: skyblue;
    border: 1px solid rgb(11, 174, 238);

}
.lion{
    width: 80px;
    height: 40px;
    text-decoration: none;
}
.flex_x{
    display: flex;
}
.fx_row{
    flex-direction: row;
}
.fx_c{
    flex-direction: column;
}
.fx_ac{
    align-items: center;
}
.fx_pc{
    justify-content: center;
}
.fx_sa{
    justify-content: space-around;
}
</style>